<template>
  <tn-navbar 
    :bottom-shadow="false"
    fixed
  >
    <text class="title">我的挪车码</text>
  </tn-navbar>
  <view class="container">
    <view class="vehicle-list">
      <!-- 添加骨架屏 -->
      <template v-if="loading">
        <view class="skeleton-card" v-for="i in 3" :key="i">
          <view class="skeleton-content">
            <view class="skeleton-image skeleton-animation"></view>
            <view class="skeleton-info">
              <view class="skeleton-title skeleton-animation"></view>
              <view class="skeleton-text skeleton-animation"></view>
              <view class="skeleton-text skeleton-animation"></view>
            </view>
          </view>
          <view class="skeleton-actions">
            <view class="skeleton-button skeleton-animation"></view>
            <view class="skeleton-button skeleton-animation"></view>
          </view>
        </view>
      </template>
      
      <!-- 原有的列表内容 -->
      <template v-else-if="carList && carList.length > 0">
        <view
          v-for="(vehicle, index) in carList" 
          :key="vehicle.id" 
          class="vehicle-card"
          @tap="navigateTo(`/pages/vehicle/detail?id=${vehicle.id}`)"
        >
          <view class="vehicle-card-content">
            <image class="vehicle-image" :src="vehicle.qrcode_url || '/static/images/default-car.png'" mode="aspectFill"></image>
            <view class="vehicle-info">
              <view class="license-plate">{{ vehicle.license_plate }}</view>
              <view class="vehicle-details">
                <text class="vehicle-remark" v-if="vehicle.remark">{{ vehicle.remark }}</text>
                <view class="vehicle-meta">
                  <text class="create-time">创建时间: {{ vehicle.itime }}</text>
                  <text class="move-count">挪车次数: {{ vehicle.move_count || 0 }}</text>
                </view>
              </view>
            </view>
          </view>
          <view class="vehicle-actions">
            <view class="action-btn qrcode-btn" @tap.stop="navigateTo(`/pages/qrcode/index?vehicleId=${vehicle.id}`)">
              <text class="btn-text">下载挪车码</text>
            </view>
            <view class="action-btn edit-btn" @tap.stop="navigateTo(`/pages/vehicle/edit?id=${vehicle.id}`)">
              <text class="btn-text">编辑</text>
            </view>
          </view>
        </view>
      </template>
      
      <!-- 空状态保持不变 -->
      <view v-else class="empty-state">
        <view class="empty-icon">
          <view class="qr-code">
            <view class="qr-container">
              <!-- 外框 -->
              <view class="qr-frame"></view>
              <!-- 定位点 -->
              <view class="qr-position-box top-left">
                <view class="qr-position-outer">
                  <view class="qr-position-inner"></view>
                </view>
              </view>
              <view class="qr-position-box top-right">
                <view class="qr-position-outer">
                  <view class="qr-position-inner"></view>
                </view>
              </view>
              <view class="qr-position-box bottom-left">
                <view class="qr-position-outer">
                  <view class="qr-position-inner"></view>
                </view>
              </view>
              <!-- 中心图案 -->
              <view class="qr-center">
                <view class="qr-center-dot"></view>
              </view>
              <!-- 装饰点 -->
              <view class="qr-dots-group">
                <view class="qr-dot" v-for="i in 6" :key="i"></view>
              </view>
            </view>
          </view>
        </view>
        <text class="empty-text">暂无挪车码，快去添加吧~</text>
      </view>
    </view>
  </view>
  
  <!-- 添加悬浮按钮 -->
  <view class="floating-btn" @tap="navigateTo('/pages/vehicle/add')">
    <text class="floating-btn-icon">+</text>
    <text class="floating-btn-text">领取挪车码</text>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { onShow } from '@dcloudio/uni-app';

const carList = ref([]);
const loading = ref(true); // 添加loading状态

// 添加模拟数据
const mockVehicleData = {
  code: 200,
  msg: "success",
  data: {
    records: [
      {
        id: 10,
        license_plate: "苏Y665557",
        remark: "",
        message: "请联系物业",
        code: "clIQvaSZ",
        qrcode_url_res: null,
        qrcode_url: "https://pro-cdn.bugjianghu.com/nuogeche_qrcode/20250316/clIQvaSZ.png",
        move_count: 0,
        notification_enabled: 0,
        webhook_url: "",
        status: 1,
        user_id: 12,
        update_time: "2025-03-19 15:19:58",
        instime: 1742056481,
        itime: "2025-03-16 00:34:41",
        is_del: 0
      },
      {
        id: 9,
        license_plate: "沪U763618",
        remark: "",
        message: "",
        code: "PO2behWt",
        qrcode_url_res: null,
        qrcode_url: "https://pro-cdn.bugjianghu.com/nuogeche_qrcode/20250315/PO2behWt.png",
        move_count: 0,
        notification_enabled: 0,
        webhook_url: "",
        status: 1,
        user_id: 12,
        update_time: "2025-03-17 11:12:10",
        instime: 1742051281,
        itime: "2025-03-15 23:08:01",
        is_del: 0
      },
      {
        id: 8,
        license_plate: "辽YEUU4Y",
        remark: "我的车",
        message: "自己去联系物业",
        code: "VtIYKyVS",
        qrcode_url_res: null,
        qrcode_url: "https://pro-cdn.bugjianghu.com/nuogeche_qrcode/20250313/VtIYKyVS.png",
        move_count: 0,
        notification_enabled: 0,
        webhook_url: "",
        status: 1,
        user_id: 12,
        update_time: "2025-03-15 02:06:43",
        instime: 1741888137,
        itime: "2025-03-14 01:48:57",
        is_del: 0
      }
    ],
    total: 3
  },
  timestamp: 1742878751
};

onMounted(async () => {

});
onShow(async () => {
  loading.value = true; // 开始加载时显示骨架屏
  try {
    // 使用模拟数据替代API调用
    setTimeout(() => {
      carList.value = mockVehicleData.data.records || [];
      loading.value = false; // 加载完成后关闭骨架屏
    }, 500);
  } catch (error) {
    console.error('获取挪车码列表失败:', error);
    loading.value = false; // 出错时也关闭骨架屏
  }
});
// 格式化日期
const formatDate = (dateString) => {
  if (!dateString) return '未知';
  const date = new Date(dateString);
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  
  return `${year}-${month}-${day}`;
};

// 修改页面导航函数
const navigateTo = async (url) => {
  try {
    // 使用模拟数据替代API调用
    const templates = uni.getStorageSync('subMessageTemplateList');
    if (templates) {
      // 模拟订阅消息结果
      console.log('模拟订阅消息模板:', templates);
      
      // 模拟成功订阅
      setTimeout(() => {
        uni.showToast({
          title: '订阅成功',
          icon: 'success',
          duration: 1500
        });
      }, 300);
    }
  } catch (error) {
    console.error('订阅消息失败:', error);
  }
  uni.navigateTo({ url });
};
</script>

<style lang="scss" scoped>
.container {
  padding: 20rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 0;
  margin-bottom: 30rpx;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 30vh;
}

.empty-icon {
  width: 300rpx;
  height: 300rpx;
  margin-bottom: 30rpx;
  position: relative;
}

.qr-code {
  width: 100%;
  height: 100%;
  padding: 20rpx;
  background: #ffffff;
  border-radius: 24rpx;
  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.08);
  animation: float 3s ease-in-out infinite;
}

.qr-container {
  position: relative;
  width: 100%;
  height: 100%;
  background: #ffffff;
  border-radius: 16rpx;
  overflow: hidden;
}

.qr-frame {
  position: absolute;
  top: 10rpx;
  left: 10rpx;
  right: 10rpx;
  bottom: 10rpx;
  border: 6rpx solid #333;
  border-radius: 12rpx;
}

.qr-position-box {
  position: absolute;
  width: 70rpx;
  height: 70rpx;
  
  &.top-left {
    top: 20rpx;
    left: 20rpx;
  }
  
  &.top-right {
    top: 20rpx;
    right: 20rpx;
  }
  
  &.bottom-left {
    bottom: 20rpx;
    left: 20rpx;
  }
}

.qr-position-outer {
  width: 100%;
  height: 100%;
  background: #333;
  border-radius: 8rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.qr-position-inner {
  width: 60%;
  height: 60%;
  background: #ffffff;
  border-radius: 4rpx;
  
  &::after {
    content: '';
    position: absolute;
    width: 30%;
    height: 30%;
    background: #333;
    border-radius: 2rpx;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

.qr-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80rpx;
  height: 80rpx;
  background: rgba(51, 51, 51, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.qr-center-dot {
  width: 40rpx;
  height: 40rpx;
  background: #333;
  border-radius: 50%;
}

.qr-dots-group {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 160rpx;
  height: 160rpx;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: space-between;
  padding: 20rpx;
}

.qr-dot {
  width: 12rpx;
  height: 12rpx;
  background: #333;
  border-radius: 2rpx;
  opacity: 0.6;
}

.empty-text {
  font-size: 28rpx;
  color: #999;
  margin-top: 20rpx;
}

.vehicle-card {
  background-color: #ffffff;
  border-radius: 12rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
  padding: 30rpx;
  margin-bottom: 20rpx;
}

.vehicle-card-content {
  display: flex;
  margin-bottom: 20rpx;
}

.vehicle-image {
  width: 120rpx;
  height: 120rpx;
  border-radius: 8rpx;
  margin-right: 20rpx;
  background-color: #f0f0f0;
}

.vehicle-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.license-plate {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
  display: block;
}

.vehicle-details {
  flex: 1;
}

.vehicle-remark {
  font-size: 28rpx;
  color: #666;
  display: block;
  margin-bottom: 10rpx;
}

.vehicle-meta {
  display: flex;
  flex-direction: column;
  gap: 6rpx;
}

.create-time, .move-count {
  font-size: 24rpx;
  color: #999;
}

.vehicle-actions {
  display: flex;
  justify-content: flex-end;
  border-top: 1rpx solid #f0f0f0;
  padding-top: 20rpx;
}

.action-btn {
  padding: 12rpx 24rpx;
  border-radius: 6rpx;
  margin-left: 20rpx;
}

.qrcode-btn {
  background-color: #1aad19;
}

.edit-btn {
  background-color: #f0f0f0;
}

.btn-text {
  font-size: 24rpx;
  color: white;
}

.edit-btn .btn-text {
  color: #666;
}

/* 添加导航栏占位样式 */
.navbar-placeholder {
  height: 90rpx; /* 根据实际导航栏高度调整 */
  width: 100%;
}

/* 悬浮按钮样式 */
.floating-btn {
  position: fixed;
  bottom: 60rpx;
  left: 50%;
  transform: translateX(-50%);
  background-color: #1aad19;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20rpx 40rpx;
  border-radius: 50rpx;
  box-shadow: 0 4rpx 16rpx rgba(26, 173, 25, 0.3);
  z-index: 999;
  white-space: nowrap;
}

.floating-btn-icon {
  font-size: 36rpx;
  font-weight: bold;
  margin-right: 10rpx;
}

.floating-btn-text {
  font-size: 28rpx;
}

@keyframes float {
  0%, 100% {
    transform: translateY(0) scale(1);
    box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.08);
  }
  50% {
    transform: translateY(-20rpx) scale(1.02);
    box-shadow: 0 16rpx 32rpx rgba(0, 0, 0, 0.12);
  }
}

/* 骨架屏样式 */
.skeleton-card {
  background-color: #ffffff;
  border-radius: 12rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
  padding: 30rpx;
  margin-bottom: 20rpx;
}

.skeleton-content {
  display: flex;
  margin-bottom: 20rpx;
}

.skeleton-image {
  width: 120rpx;
  height: 120rpx;
  border-radius: 8rpx;
  background-color: #f0f0f0;
}

.skeleton-info {
  flex: 1;
  margin-left: 20rpx;
}

.skeleton-title {
  height: 36rpx;
  width: 200rpx;
  background-color: #f0f0f0;
  margin-bottom: 20rpx;
  border-radius: 4rpx;
}

.skeleton-text {
  height: 24rpx;
  width: 160rpx;
  background-color: #f0f0f0;
  margin-bottom: 10rpx;
  border-radius: 4rpx;
}

.skeleton-actions {
  display: flex;
  justify-content: flex-end;
  border-top: 1rpx solid #f0f0f0;
  padding-top: 20rpx;
  gap: 20rpx;
}

.skeleton-button {
  width: 120rpx;
  height: 48rpx;
  background-color: #f0f0f0;
  border-radius: 6rpx;
}

/* 骨架屏动画 */
.skeleton-animation {
  position: relative;
  overflow: hidden;
  
  &::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.3) 50%,
      rgba(255, 255, 255, 0) 100%
    );
    animation: shimmer 1.5s infinite;
  }
}

@keyframes shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}
</style> 